<template>
  <div id="city">
    <div class="head">
      <div class="content flex align-center">
        <img src="http://www.bendibao.com/img/city_logo.png" alt="" srcset="" />
        <span class="head-title">城市导航</span>
        <div class="input-box flex align-center">
          <input
            @input="getValue"
            type="text"
            class="input"
            v-model="cityInput"
            placeholder="请输入城市"
            @keyup.enter="search"
          />
          <button class="search-city cursor" @click="search">搜索</button>
        </div>
      </div>
    </div>
    <div class="city-ul content" v-show="searchCitys.length === 0">
      <div class="city-li flex" v-for="(item, index) in citys" :key="index">
        <span class="latter">{{ index }}</span>
        <div class="l-city flex">
          <span
            class="cursor"
            v-for="(ite, idx) in item"
            :key="idx"
            @click="goRobot(ite.citycode, ite.gzh_account)"
            >{{ ite.gzh_name }}</span
          >
        </div>
      </div>
    </div>
    <div class="city-ul content" v-show="searchCitys.length !== 0">
      <div class="city-li flex" v-for="(item, key) in searchCitys" :key="key">
        <div class="l-city flex">
          <span
            class="cursor"
            @click="goRobot(item.citycode, item.gzh_account)"
            >{{ item.gzh_name }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityInput: "",
      citys: [],
      cityLists: [],
      searchCitys: [],
    };
  },
  created() {
    this.getCity();
  },
  methods: {
    /**
     * 获取城市
     */
    getCity() {
      this.$http.get(`?controller=fankui&action=getGzhInfo`).then((res) => {
        res.data.data.forEach((val) => {
          val.gzh_name = val.gzh_name.replace("本地宝", "");
          let letter = val.citycode.slice(0, 1);
          letter = letter.toUpperCase();
          val["letter"] = letter;
        });
        this.cityLists = res.data.data;
        this.cityLists.forEach((val, idx) => {
          if (
            val.gzh_name.indexOf("测试") != -1 ||
            val.id.indexOf("114") != -1
          ) {
            this.cityLists.splice(idx, 1);
          }
        });
        let letters = {};
        this.cityLists.forEach((item) =>
          Array.isArray(letters[item.letter])
            ? letters[item.letter].push(item)
            : (letters[item.letter] = [...[item]])
        );
        this.citys = letters;
      });
    },

    /**
     * 跳转到对应城市
     */
    goRobot(code, gzh) {
      location.href = `http://robot.bendibao.com/?citycode=${code}&gzh=${gzh}`;
    },

    /**
     * 获取搜索框的值，清空时城市为所有
     */
    getValue() {
      if (this.cityInput == "") {
        this.searchCitys = [];
      }
    },

    /**
     * 搜索城市按钮
     */
    search() {
      this.searchCitys = [];
      this.cityLists.forEach((val) => {
        if (val.gzh_name.indexOf(this.cityInput) != -1) {
          this.searchCitys.push(val);
        }
      });
      if (this.searchCitys.length == 0) {
        this.$message({
          message: `暂无该城市`,
          type: "warning",
          duration: 1200,
          offset: 150
        });
      }
    },
  },
};
</script>

<style scoped>
#city {
  background-color: #eee;
}
.city-ul {
  padding: 30px 30px 0;
}

.cursor {
  cursor: pointer;
}

.city-li {
  margin: 12px 0;
  padding: 0 0 5px 0;
  border-bottom: 1px dotted #ddd;
  font-size: 16px;
}

.latter {
  flex: 1;
  margin: 0 20px 0 0;
}
.l-city {
  flex: 50;
  flex-wrap: wrap;
}
.l-city span {
  margin: 0 10px 5px;
}
.content {
  width: 1200px;
  margin: 0 auto;
}

.head {
  height: 75px;
  margin-bottom: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
  background: #fff !important;
}
.head-title {
  margin: 0 10px;
  line-height: 40px;
  height: 40px;
  padding: 0 15px;
  font-size: 20px;
  font-weight: 600;
}

.input {
  border: 1px solid #c0c0c0;
  border-right: none;
  outline: none;
  border-radius: 3px 0 0 3px;
  font-size: 18px;
  padding: 0 0 0 10px;
  width: 300px;
  height: 44px;
}

/* .input-box {
  display: inline-block;
  height: 44px;
  border-radius: 3px;
} */

.search-city {
  height: 46px;
  box-sizing: border-box;
  padding: 0 20px;
  background-color: #f50;
  border-radius: 0 3px 3px 0;
  color: #fff;
  font-size: 18px;
}
.city-ul {
  padding-bottom: 60px;
  background-color: #fff;
}
</style>